<script>
import {error} from "autoprefixer/lib/utils";

export default {
  name: "premDialog",
  props: {
    showPerDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      /* 权限列表 */
      permissionList: [],
      /* 给员工分配角色带给服务器的参数 */
      premParams: {
        id: '',
        permIds: []
      }
    }
  },
  methods: {
    /* fetchPermissionList()函数用于派发action获取所有的权限点 */
    async fetchPermissionList() {
      this.permissionList = await this.$store.dispatch('permissionsStore/fetchPermissionList')
    },
    /*findPermIds()函数用于根据当前角色的ID获取当前角色的所属权限ID数组*/
    async findPermIds(id) {
      const {permIds} = await this.$store.dispatch('settingsStore/findRole', id)
      this.premParams.id = id
      this.$nextTick(() => {
        setTimeout(() => {
          // 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
          this.$refs.tree.setCheckedKeys(permIds)
        })
      })
    },
    /* 对话框关闭时的回调函数 */
    handleClose() {
      this.$emit('update:showPerDialog', false)
    },
    /* 点击取消按钮的回调函数 */
    handleCancel() {
      this.$emit('update:showPerDialog', false)
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      try {
        // 收集勾选中的ID数组数据(若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组)
        this.premParams.permIds = this.$refs.tree.getCheckedKeys()
        const message = await this.$store.dispatch('settingsStore/assignPrem', this.premParams)
        this.$message.success(message)
        this.$emit('update:showPerDialog', false)
      } catch (e) {
        this.$message.error(error.message)
      }
    }
  },
  watch: {
    /* 监听showPerDialog字段的变化清空tree组件数据 */
    showPerDialog(newValue, oldValue) {
      if (newValue) return
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys([])
      }, 500)
      // this.premParams.permIds = []
    }
  }
}
</script>

<template>
  <el-dialog v-bind="$attrs" title="角色分配权限" :visible="showPerDialog" @close="handleClose">
    <el-tree :data="permissionList" :props="{label:'name'}" show-checkbox default-expand-all :check-strictly="true" ref="tree" node-key="id" :expand-on-click-node="false"></el-tree>
    <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleCancel">取 消</el-button>
       <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
